import { memo, useEffect, useRef } from 'react'
import { Chart } from '@antv/g2'

// 初始数据：time 字符串 → timestamp（毫秒）
const initialData = [
  { time: new Date('1991-01-01').getTime(), value: 15468 },
  { time: new Date('1992-01-01').getTime(), value: 16100 },
  { time: new Date('1993-01-01').getTime(), value: 15900 },
  { time: new Date('1994-01-01').getTime(), value: 17409 },
  { time: new Date('1995-01-01').getTime(), value: 17000 },
  { time: new Date('1996-01-01').getTime(), value: 31056 },
  { time: new Date('1997-01-01').getTime(), value: 31982 },
  { time: new Date('1998-01-01').getTime(), value: 32040 },
  { time: new Date('1999-01-01').getTime(), value: 33233 }
]

function AreaChart() {
  const containerRef = useRef<HTMLDivElement>(null)

  useEffect(() => {
    if (!containerRef.current) return

    // 1. 创建 Chart 实例
    const chart = new Chart({
      container: containerRef.current,
      autoFit: true,
      padding: [60, 24, 48, 64] // 上侧留出标题空间
    })

    // 2. 载入数据并配置时间刻度
    chart.data(initialData)
    chart.scale('time', {
      type: 'time',
      mask: 'YYYY',
      tickCount: 5
    })

    // 3. 隐藏 X、Y 轴的刻度值 & 只显示网格
    chart.axis('x', {
      label: null,
      tickLine: null,
      line: null,
      grid: { visible: true }
    })
    chart.axis('y', {
      label: null,
      line: null,
      tickLine: null,
      title: null,
      grid: { visible: true }
    })

    // // 4. 添加图表标题
    // chart.annotation().text({
    //   position: ['50%', '0%'],
    //   content: '年度动态面积图',
    //   style: {
    //     fontSize: 16,
    //     fontWeight: 'bold',
    //     textAlign: 'center',
    //   },
    //   offsetY: -10,
    // })

    // 5. 绘制面积图层
    chart.area().encode('x', 'time').encode('y', 'value').style({ fill: '#1890ff', opacity: 0.2 })

    // 6. 绘制折线图层
    chart.line().encode('x', 'time').encode('y', 'value').style({ stroke: '#1890ff', lineWidth: 2 })

    // 7. 渲染
    chart.render()

    // 8. 卸载时清理
    return () => {
      chart.destroy()
    }
  }, [])

  return <div ref={containerRef} style={{ width: '100%', height: '400px' }} />
}

export default memo(AreaChart)
